<template>
  <card id="card">
    <Tabs :value="selectTabPane" @on-click="clickTabs">
        <TabPane name="1" label="基本信息" icon="ios-folder-outline">
            <Form ref="formItem" :model="formItem" :rules="ruleForm" :label-width="140">
                <Row type="flex">
                    <Col span="6">
                        <FormItem label="病房名称：" prop="name">
                            <Input v-model="formItem.name" size="large" placeholder="请填写内容..."></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="治疗时间：" prop="duration">
                            <Select transfer clearable size="large" v-model="formItem.duration" :label-in-value=true>
                                <Option :value="0" :key="0">不限时间</Option>
                                <Option :value="1" :key="1">1年</Option>
                                <Option :value="2" :key="2">2年</Option>
                                <Option :value="3" :key="3">3年</Option>
                                <Option :value="5" :key="5">5年</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span="6">
                        <FormItem label="病房价格(¥)：" prop="price">
                            <InputNumber size="large" :min="0" v-model="formItem.price" style="width: 100%"></InputNumber>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="用于治疗金额(¥)：" prop="treatmentPrice">
                            <InputNumber size="large" :min="0" v-model="formItem.treatmentPrice" style="width: 100%"></InputNumber>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="用于产品金额(¥)：" prop="productPrice">
                            <InputNumber size="large" :min="0" v-model="formItem.productPrice" style="width: 100%"></InputNumber>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span="24">
                        <FormItem>
                            <Button @click="save" size="large" type="primary">保存</Button>
                            <Button @click="close" size="large" type="ghost" style="margin-left: 8px">关闭</Button>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </TabPane>
        <TabPane name="2" label="基本方案" icon="ios-folder-outline" :disabled="disabled">
            <Tabs :value="selectTabPane2" @on-click="clickTabs2">
                <TabPane name="1" label="项目类" icon="ios-folder-outline">
                    <project-list ref="projectList1" :homeId="homeId" :planType="planType"></project-list>
                </TabPane>
                <TabPane name="2" label="产品类" icon="ios-folder-outline">
                    <product-list ref="productList1" :homeId="homeId" :planType="planType"></product-list>
                </TabPane>
            </Tabs>
        </TabPane>
        <TabPane name="3" label="可选方案" icon="ios-folder-outline" :disabled="disabled">
            <Tabs :value="selectTabPane3" @on-click="clickTabs3">
                <TabPane name="1" label="项目类" icon="ios-folder-outline">
                    <project-list ref="projectList2" :homeId="homeId" :planType="planType"></project-list>
                </TabPane>
                <TabPane name="2" label="产品类" icon="ios-folder-outline">
                    <product-list ref="productList2" :homeId="homeId" :planType="planType"></product-list>
                </TabPane>
            </Tabs>
        </TabPane>
        <TabPane name="4" label="折扣方案" icon="ios-folder-outline" :disabled="disabled">
            <Tabs :value="selectTabPane4" @on-click="clickTabs4">
                <TabPane name="1" label="项目类" icon="ios-folder-outline">
                    <project-main ref="projectMain" :homeId="homeId"></project-main>
                </TabPane>
                <TabPane name="2" label="产品类" icon="ios-folder-outline">
                    <product-main ref="productMain" :homeId="homeId"></product-main>
                </TabPane>
            </Tabs>
        </TabPane>
    </Tabs>
  </card>
</template>

<script>
import ProjectList from '@/view/basic/info/list/HomeProjectList.vue';
import ProductList from '@/view/basic/info/list/homeProductList.vue';
import ProductMain from '@/view/basic/info/list/DiscountProductMain.vue';
import ProjectMain from '@/view/basic/info/list/DiscountProjectMain.vue';
import Home from "../../../../views/home/home";
export default {
    components: {
        Home,
        ProjectList,
        ProductList,
        ProductMain,
        ProjectMain
    },
    data () {
        return {
            baseURL: '/user/home',
            selectTabPane: '1',
            selectTabPane2: '',
            selectTabPane3: '',
            selectTabPane4: '',
            disabled: true,
            selectProject: {},
            homeId: -1,
            planType: 0,
            formItem: {
                id: '',
                name: '',
                duration: '',
                price: '',
                treatmentPrice: '',
                productPrice: ''
            },
            ruleForm: {
                name: [
                    { required: true, message: '请填写疗程名称', pattern: /.+/, trigger: 'change' }
                ],
                duration: [
                    { required: true, message: '请选择治疗时间', pattern: /.+/, trigger: 'change' }
                ],
                price: [
                    { required: true, message: '请填写金额', pattern: /.+/, trigger: 'change' }
                ],
                treatmentPrice: [
                    { required: true, message: '请填写金额', pattern: /.+/, trigger: 'change' }
                ],
                productPrice: [
                    { required: true, message: '请填写金额', pattern: /.+/, trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        save () {
            this.$refs['formItem'].validate((valid) => {
                if (valid) {
                    let url = this.baseURL + '/saveOrUpdate'
                    this.$ajax.post(url, this.formItem).then((response) => {
                        let {code, data, msg} = response.data
                        if (code === 0) {
                            this.$bus.alert('success', '保存成功')
                            this.formItem = data
                            this.homeId = data.id
                            this.disabled = false
                        } else {
                            this.$bus.alert('error', msg)
                        }
                    })
                }
            })
        },
        close () {
            this.$store.state.app.close = true
            this.$bus.closePageToLink()
        },
        clickTabs (name) {
            if (name === '2') {
                this.planType = 1
                this.selectTabPane2 = '1'
            } else if (name === '3') {
                this.planType = 2
                this.selectTabPane3 = '1'
            } else if (name === '4') {
                this.selectTabPane4 = '1'
            }
            this.selectTabPane = name
        },
        clickTabs2 (name) {
            if (name === '1') {
                this.$refs.projectList1.refresh()
            } else if (name === '2') {
                this.$refs.productList1.refresh()
            }
            this.selectTabPane2 = name
        },
        clickTabs3 (name) {
            if (name === '1') {
                this.$refs.projectList2.refresh()
            } else if (name === '2') {
                this.$refs.productList2.refresh()
            }
            this.selectTabPane3 = name
        },
        clickTabs4 (name) {
            if (name === '1') {
                this.$refs.projectMain.refresh()
            } else if (name === '2') {
                this.$refs.productMain.refresh()
            }
            this.selectTabPane4 = name
        },
        changeSelect (rows) {
            this.selectRows = rows
        },
        changeTotalSize (totalSize) {
            this.pageModel.totalSize = totalSize
        },
        changePageNumber (pageNumber) {
            this.pageModel.pageNumber = pageNumber
        },
        changePageSize (pageSize) {
            this.pageModel.pageSize = pageSize
        },
        refresh () {
        },
        reset () {
            this.$refs.formItem.resetFields()
        },
        init () {
            this.disabled = true
            this.selectTabPane = '1'
            this.$bus.fillData(this.formItem, this.$route.query.row)
            if (this.$route.query.row) {
                this.homeId = this.$route.query.row.id
                this.disabled = false
            }
        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.init()
        })
    },
    // beforeRouteLeave (to, from , next) {
    //     this.$bus.routeLeave(next, this.selectTabPane)
    // }
}
</script>

<style>

</style>
